import React, { useState, useEffect } from 'react';
import http from '../../utils/http';
import { NavBar, Tag } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import styles from './index.module.css';
import { Rate } from 'react-vant';

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [classify, setClassify] = useState([]);
  const [activeTab, setActiveTab] = useState('全部');
  const [value, setValue] = useState(4);

  // 获取评论标签
  const getclassify = async () => {
    const res = await http.get('/review/classify');
    const { code, data } = res.data;
    if (code === 20000) {
      setClassify(data);
    }
  };

  useEffect(() => {
    getclassify();
  }, []);
  console.log(classify);

  return (
    <div>
      <NavBar onBack={() => navigate('/shop')} style={{ background: '#fff' }}>评论</NavBar>
      <div style={{ marginTop: '10px', background: '#fff', height: '100%' }}>
        <div className={styles.tabs}>
          <div
            className={styles.tab}
            onClick={() => setActiveTab('全部')}
          >
            全部
          </div>
          <div
            className={styles.tab}

            onClick={() => setActiveTab('态度非常好')}
          >
            态度非常好
          </div>
          <div
            className={styles.tab}

            onClick={() => setActiveTab('回复很及时')}
          >
            回复很及时
          </div>
          <div
            className={styles.tab}
            onClick={() => setActiveTab('语气温和')}
          >
            语气温和
          </div>
          <div
            className={styles.tab}

            onClick={() => setActiveTab('讲解很细致')}
          >
            讲解很细致
          </div>
          <div
            className={styles.tab}

            onClick={() => setActiveTab('回答很及时')}
          >
            回答很及时
          </div>
          <div
            className={styles.tab}
            onClick={() => setActiveTab('回答很专业')}
          >
            回答很专业
          </div>
          <div
            className={styles.tab}

            onClick={() => setActiveTab('讲解细致耐心')}
          >
            讲解细致耐心
          </div>
          <div
            className={styles.tab}

            onClick={() => setActiveTab('态度很好')}
          >
            态度很好
          </div>
        </div>
        {activeTab === '全部' && (
          <>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>普通用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>语气温和</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很耐心</Tag>
              </div>
              <div>
                感谢医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>语气温和</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很细致</Tag>
              </div>
              <div>
                感谢医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>高级用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>语气很温和</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很细致很耐心</Tag>
              </div>
              <div>
                感谢高明医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>普通用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>语气温和</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很细致很耐心</Tag>
              </div>
              <div>
                感谢高明医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
          </>
        )}
        {activeTab === '回复很及时' && (
          <>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>语气温和</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很细致很耐心</Tag>
              </div>
              <div>
                感谢王医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>高级用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>语气温和</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很细致很耐心</Tag>
              </div>
              <div>
                感谢高医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
          </>
        )}
        {activeTab === '态度很好' && (
          <>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>态度很好</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很细致很耐心</Tag>
              </div>
              <div>
                感谢医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>普通用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>语气温和</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很细致很耐心</Tag>
              </div>
              <div>
                感谢叶医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
          </>
        )}
        {activeTab === '讲解很细致' && (
          <>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>态度很好</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很细致很耐心</Tag>
              </div>
              <div>
                感谢医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
            <div className={styles.divitemJia}>
              <div style={{ display: 'flex', justifyContent: 'space - between' }}>
                <p>普通用户****</p>
                <Rate value={value} onChange={setValue} />
              </div>
              <div>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>语气温和</Tag>
                <Tag color='#000'
                  fill='outline'
                  style={{ '--border-radius': '6px', margin: '10px', padding: '6px' }}>讲解很细致很耐心</Tag>
              </div>
              <div>
                感谢叶医生的回复~
              </div>
              <div>
                2024年12月18日14:15:48
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Index;